<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:replace="common/base::pagetitle"></title>
    <link th:replace="common/base::static"/>
    <style>

        .layui-carousel-ind {
            position: absolute;
            top: -41px;
            text-align: right;
        }
        .layui-carousel ul.layui-row {
            background: #ffffff;
            margin: 0;
        }
        #shortcut ul.layui-row li {
            text-align: center;
            /*width: 87px;*/
        }
        .layui-carousel ul.layui-row li a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .kvf-backlog-body {
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .kvf-backlog-body h3 {
            padding-bottom: 10px;
            font-size: 12px;
        }
        .kvf-backlog-body p cite {
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688;
        }
    </style>
</head>
<body>

<div id="kPage" class="layui-fluid kvf-fluid-padding15">
    <div class="layui-row layui-col-space">

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-carousel" id="aaa">
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs3">
                                <a lay-href="app/content/comment.html" class="kvf-backlog-body">
                                    <h3>总分析任务</h3>
                                    <p><cite id="taskCount">0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/forum/list.html" class="kvf-backlog-body">
                                    <h3>总视频数</h3>
                                    <p><cite id="videoCount">0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/content/comment.html" class="kvf-backlog-body">
                                    <h3>获取客户档案数</h3>
                                    <p><cite id="intentionCustCount">0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/forum/list.html" class="kvf-backlog-body">
                                    <h3>当前运行任务</h3>
                                    <p><cite id="runTaskCount">0</cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-carousel" id="bbb">
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs3">
                                <a lay-href="app/content/comment.html" class="kvf-backlog-body">
                                    <h3>剩余点数</h3>
                                    <p><cite id="custNum">0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/forum/list.html" class="kvf-backlog-body">
                                    <h3>消耗点数</h3>
                                    <p><cite id="xhCustNum">12</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/content/comment.html" class="kvf-backlog-body">
                                    <h3>null</h3>
                                    <p><cite>null</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a lay-href="app/forum/list.html" class="kvf-backlog-body">
                                    <h3>null</h3>
                                    <p><cite>null</cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6" >
            <div class="layui-card">
                <div class="layui-card-header">上周获客统计</div>
                <div class="layui-card-body">
                    <div id="histogram" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户分布图</div>
                <div class="layui-card-body">
                    <div id="cake" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户分布图</div>
                <div class="layui-card-body">
                    <div id="chinaMap" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">上周获客统计</div>
                <div class="layui-card-body">
                    <div id="radar" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>


<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:replace="common/base::echartjs"></script>

<script type="text/javascript" th:inline="javascript">
    layui.use(['carousel'], function () {
        var $ = layui.$, carousel = layui.carousel;

        carousel.render({
            elem: '#shortcut'
            ,width: '100%' //设置容器宽度
            ,height: '200px'
            ,arrow: 'none' //始终显示箭头
            ,autoplay: false
        });
        carousel.render({
            elem: '#backlog'
            ,width: '100%' //设置容器宽度
            ,height: '200px'
            ,arrow: 'none' //始终显示箭头
            ,autoplay: false
        });
        carousel.render({
            elem: '#other'
            ,width: '100%' //设置容器宽度
            ,height: '200px'
            ,arrow: 'none' //始终显示箭头
            ,autoplay: false
        });


        //中国地图
        var chinaMapChart = echarts.init(document.getElementById('chinaMap'));
        // 指定图表的配置项和数据
        chinaMapOption = {
            tooltip : {
                trigger: 'item',
                formatter: '{b}'
            },
            series : [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'multiple',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name:'广东',selected:true}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        chinaMapChart.setOption(chinaMapOption);


        //柱状图
        var histogramChart = echarts.init(document.getElementById('histogram'));
        var histogramOption = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross'
              }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [435, 653, 575, 798, 866, 975,478],
                    markPoint: {
                        data: [{ type: 'max' },{ type: 'min'}]
                    },
                    markLine: {
                        data: [{ type: 'average' }]
                    },
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                //给大于颜色数量的柱体添加循环颜色的判断
                                var lindex = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    lindex = params.dataIndex - colorList.length;
                                }
                                return colorList[lindex]
                            }
                        }
                    }
                }
            ]
        };
        histogramChart.setOption(histogramOption);


        //饼图
        var cakeChart = echarts.init(document.getElementById('cake'));
        //就是需要设置给饼图的数据
        var cakeData = [
            {value: 11231, name: "抖音",},
            {value: 22673, name: "快手"},
            {value: 6123, name: "小红书"},
            {value: 8989, name: "哔哩哔哩"},
            {value: 6700, name: "百度地图"}
            ]
        //4。准备配置项
        var cakeOption = {
            series: [
                {
                    type: 'pie',
                    data: cakeData
                }
            ]
        }
        //将配置项设置给echarts实例对象
        cakeChart.setOption(cakeOption);


        //雷达图
        var radarChart = echarts.init(document.getElementById('radar'))
        // 各个维度的最大值
        var radarData = [
            {
                name: '抖音',
                max: 100
            },
            {
                name: '快手',
                max: 100
            },
            {
                name: '小红书',
                max: 100
            },
            {
                name: '哔哩哔哩',
                max: 100
            },
            {
                name: '百度地图',
                max: 100
            }
        ]
        var radarOption = {
            radar:{
                //配置雷达图的最大值
                indicator:radarData,
                //配置雷达图最外层的形状 polygon
                shape:'circle'
            },
            series:[
                {
                    //设置雷达图类型
                    type:'radar',
                    //雷达图的数值
                    label:{
                        show:true
                    },
                    //每个雷达图形成阴影面积
                    areaStyle:{},
                    data:[
                        {
                            name:'华为手机',
                            value:[80,90,72,80,92]
                        },
                        {
                            name:'中兴手机',
                            value:[90,80,42,60,82]
                        }
                    ]
                }
            ]
        }
        radarChart.setOption(radarOption)

    });

    $(document).ready(function() {
      $.ajax({
        url: '/hxy/account/account', // 后端接口URL
        type: 'POST', // 请求方法
        dataType: 'json', // 预期服务器返回的数据类型
        success: function(data) {
<!--        console.log(data);-->
<!--          // 在这里处理接收到的Map数据并显示指定键的值-->
<!--          var mapData = data.map; // 假设后端接口返回的数据中有一个名为"map"的属性-->
<!--          var keyToDisplay = data.taskCount; // 要显示的指定键-->
<!--          var value = mapData[keyToDisplay]; // 获取指定键的值-->
<!--          console.log(keyToDisplay);-->
<!--          console.log(value);-->
<!--          var html = '<p>' + keyToDisplay + ': ' + (value !== undefined ? value : 'No data available') + '</p>';-->
<!--          $('#mapData').html(html); // 将处理后的数据插入到指定的HTML元素中-->
                const map = new Map()
                for(var k in data ){
                    map.set(k,data[k])
                }
                document.getElementById("taskCount").innerText=map.get('taskCount');
                document.getElementById("videoCount").innerText=map.get('videoCount');
                document.getElementById("runTaskCount").innerText=map.get('runTaskCount');
                document.getElementById("intentionCustCount").innerText=map.get('intentionCustCount');
                document.getElementById("xhCustNum").innerText=map.get('xhCustNum');
                document.getElementById("custNum").innerText=map.get('custNum');

        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log('Error: ' + textStatus + ' ' + errorThrown);
        }
      });
    });
</script>

</body>
</html>